<template>
  <div class="task-list">
    <el-table :data="tableData" style="width: 1226px">
      <el-table-column prop="title" label="任务名"></el-table-column>
      <el-table-column prop="reqId" label="任务编号"></el-table-column>
      <el-table-column prop="annexPath" label="任务文件"></el-table-column>
      <el-table-column prop="datetime" label="任务发布时间"></el-table-column>
      <!-- <el-table-column prop="message" label="相关信息"></el-table-column> -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleClick(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增区域，用于显示选定行的详细信息 -->
    <div v-show="showTable">
      <h3>详细任务信息：</h3>
      <!-- 修改 el-descriptions 组件的属性 -->
      <el-descriptions :data="[selectedRow]" border :column="1">
        <el-descriptions-item label="账号">{{ selectedRow.account }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ selectedRow.name }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ selectedRow.title }}</el-descriptions-item>
        <el-descriptions-item label="信息">{{ selectedRow.message }}</el-descriptions-item>
        <el-descriptions-item label="日期时间">{{ selectedRow.datetime }}</el-descriptions-item>
        <el-descriptions-item label="附件路径">{{ selectedRow.annexPath }}</el-descriptions-item>
        <el-descriptions-item label="请求ID">{{ selectedRow.reqId }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          selectedRow.state ? '已完成' : '未完成'
        }}</el-descriptions-item>
      </el-descriptions>
      <el-form :model="answer">
        <el-form-item label="回复：">
          <el-input v-model="answer.answer" type="text" style="width: 600px"></el-input>
        </el-form-item>
        <el-button @click="sendAnswer" type="primary">发送</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { reactive, ref, toRefs } from 'vue'
import { onMounted } from 'vue'
import func_map from '../main'
export default {
  setup() {
    //console.log(sessionStorage.getItem('account'))
    const data = reactive({
      account: sessionStorage.getItem('account')
    })
    const tableData = reactive([])
    // 新增数据属性，用于存储选定行的数据
    const selectedRow = reactive({})
    const showTable = ref(false)
    const answer = reactive({
      answer: ''
    })
    const getTaskRes = async () => {
      const { data: res } = await axios.post('user/function/checkReceiveTask', {
        account: data.account
      })
      if (res.code == 200) {
        tableData.splice(0, tableData.length, ...res.data)
      }
    }
    // 修改 handleClick 函数，更新选定行的数据
    const handleClick = (row) => {
      Object.assign(selectedRow, row)
      showTable.value = true
    }

    const sendAnswer = async () => {
      const { data: result } = await axios.post('user/function/Answer', {
        account: selectedRow.account,
        reqId: selectedRow.reqId,
        message: answer.answer,
        annexPath: selectedRow.annexPath
      })
      //console.log(selectedRow.account)
      // console.log([selectedRow])
      console.log(result)
    }
    onMounted(getTaskRes)
    onMounted(function () {
      func_map.func_map['UpdateTaskEvent'] = getTaskRes
      console.log(func_map)
    })

    return {
      ...toRefs(answer),
      getTaskRes,
      tableData,
      handleClick,
      // 返回新增数据属性
      selectedRow,
      showTable,
      answer,
      sendAnswer
    }
  }
}
</script>

<style>
.task-list {
  position: relative;
  margin: 0 auto;
  width: 1226px;
  height: 100%;
}
</style>
